<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务器错误 - ubike</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .error-container {
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
            text-align: center;
            color: white;
            padding: 0px 20px;
            box-sizing: border-box;
        }
        
        .brand-logo {
            margin-bottom: 10px;
        }
        
        .brand-logo img {
            height: 130px;
            width: auto;
            filter: brightness(0) invert(1);
        }
        
        .error-content {
            max-width: 500px;
        }
        
        .error-content h1 {
            font-size: 5rem;
            margin-bottom: 15px;
            font-weight: 700;
            text-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .error-content h2 {
            font-size: 1.5rem;
            margin-bottom: 12px;
            font-weight: 600;
        }
        
        .error-content p {
            font-size: 1rem;
            margin-bottom: 20px;
            line-height: 1.5;
            opacity: 0.9;
        }
        
        .btn-home {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 35px;
            background: white;
            color: #1e88e5;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        
        .btn-home:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255,255,255,0.4);
            background: #f8f9fa;
        }
        
        .btn-refresh {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 25px;
            background: rgba(255,255,255,0.2);
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 500;
            font-size: 1rem;
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.3);
            margin-left: 15px;
        }
        
        .btn-refresh:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-2px);
        }
        
        .action-buttons {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        
        .error-footer {
            margin-top: 25px;
            font-size: 0.8rem;
            opacity: 0.8;
        }
        
        .error-footer p {
            margin: 5px 0;
        }
        
        .contact-info {
            margin-top: 15px;
            padding: 12px;
            background: rgba(255,255,255,0.1);
            border-radius: 8px;
            font-size: 0.8rem;
        }
        
        .contact-info a {
            color: white;
            text-decoration: underline;
        }
        
        @media (max-width: 768px) {
            .error-content h1 {
                font-size: 4rem;
            }
            
            .error-content h2 {
                font-size: 1.4rem;
            }
            
            .action-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .btn-refresh {
                margin-left: 0;
                margin-top: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="error-container">
        <div class="brand-logo">
            <a href="/">
                <img src="/static/tp/Logo.png" alt="ubike" onerror="this.style.display='none'">
            </a>
        </div>
        
        <div class="error-content">
            <h1>500</h1>
            <h2>服务器内部错误</h2>
            <p>抱歉，服务器在处理您的请求时出现了问题。这可能是暂时的技术故障，请稍后重试。</p>
            
            <div class="action-buttons">
                <a href="/" class="btn-home">
                    <i class="fas fa-home"></i>
                    返回首页
                </a>
                <a href="javascript:location.reload()" class="btn-refresh">
                    <i class="fas fa-redo"></i>
                    刷新页面
                </a>
            </div>
            
            <div class="contact-info">
                <p>如果问题持续存在，请联系我们的技术支持团队：</p>
                <p>📧 h3444850160@gmail.com </p>
            </div>
        </div>
        
        <div class="error-footer">
            <p>© 2025 ubike. 保留所有权利</p>
            <p>优质生活触手可及</p>
        </div>
    </div>
</body>
</html>